<template>
  <div>
    <!-- <el-table :data="tableData" style="width: 600px" max-height="250"> -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      style="width: 100%"
      max-height="500"
    >
      <!-- 表格组件 -->
      <el-table-column fixed prop="userid" label="ID"></el-table-column>
      <el-table-column prop="nickName" label="昵称"></el-table-column>
      <el-table-column prop="avatar" label="头像"></el-table-column>
      <el-table-column prop="uname" label="姓名"></el-table-column>
      <el-table-column prop="birthday" label="生日"></el-table-column>
      <el-table-column label="vip否">
        <template slot-scope="scope">
          {{ scope.row.isVip ? "vip" : "非vip" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="uphone"
        width="120pxpx"
        label="手机号"
      ></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column width="230" fixed="right" align="center">
        <template #header>
          <div class="usersearch">
            <input
              v-model="searchunp"
              @keyup.enter="search"
              @blur.enter="search"
              type="text"
            />
            <el-button
              @click.native="search"
              size="mini"
              type="primary"
              icon="el-icon-search"
              >搜索</el-button
            >
          </div>
          <!-- <el-input
            v-model="i"
            prefix-icon="el-icon-search"
            placeholder="输入用户/手机号搜索"
            @keyup.enter.native="search"
            @blur.enter.native="search"
          /> -->
        </template>
        <template slot-scope="scope">
          <el-button
            circle
            type="danger"
            icon="el-icon-delete"
            @click="delItem(scope.$index)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block" style="margin-top: 15px">
      <el-pagination
        background
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 8, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, // 当前页码
      total: "", // 总条数
      pageSize: 5, // 每页的数据条数
      searchunp: "",
      i: "",
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    search() {
      let unp = "";
      unp = this.searchunp.trim();
      if (unp != "") {
        let url = `/users/usersearchlike?${unp}`;
        this.axios.get(url).then(res => {
          console.log(res);
        });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    getdata() {
      let url = "/users/user";
      this.axios.get(url).then(res => {
        this.tableData = res.data;
        this.total = res.data.length;
      });
    },
    delItem(index) {
      this.tableData.splice(index, 1);
      console.log(this.tableData)[index];
    },
  },
};
</script>

<style lang="scss" scoped>
.usersearch {
  padding: 0 10px;
  display: flex;
  width: 100%;
  input {
    width: 130px;
  }
  .el-button--mini,
  .el-button--mini.is-round {
    padding: 7px 4px;
  }
}
</style>
